<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input
        v-model="data.name"
        prefix-icon="Search"
        style="width: 240px; margin-right: 10px"
        placeholder="请输入宠物名称查询"
      ></el-input>
      <el-select v-model="data.typeId" placeholder="请选择宠物分类" style="width: 200px;">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset"
        >重置</el-button
      >
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table tooltip-effect="dark myTooltip" stripe :data="data.tableData">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="typeName" label="宠物类型"></el-table-column>
        <el-table-column prop="name" label="宠物名称"></el-table-column>
        <el-table-column prop="sex" label="宠物性别"></el-table-column>
        <el-table-column prop="img" label="宠物图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; border-radius: 5px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              preview-teleported
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="centigrade" label="宠物价格"></el-table-column>
        <el-table-column prop="weight" label="体重（kg）"></el-table-column>
        <el-table-column prop="height" label="身高（cm）"></el-table-column>
        <el-table-column
          prop="heartRate"
          label="心率（次/分）"
        ></el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" v-if="data.total">
      <el-pagination
        @current-change="load"
        background
        layout="total, prev, pager, next"
        :page-size="data.pageSize"
        v-model:current-page="data.pageNum"
        :total="data.total"
      />
    </div>
    <el-dialog
      title="宠物信息"
      v-model="data.formVisible"
      width="60%"
      destroy-on-close
    >
    <el-form :inline="true" :model="form" class="demo-form-inline" style="margin: 0 auto;">
        <el-row style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-upload
                    disabled
                    :action="baseUrl + '/files/upload'"
                    :on-success="handleFileUpload"
                    :show-file-list="false"
                    class="avatar-uploader">
                    <img v-if="form.img" :src="form.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-col>
            <el-col :span="8" style="margin-top: 20px;">
                <el-form-item label="宠物姓名">
                    <el-input disabled style="width: 200px;" v-model="form.name" placeholder="请输入宠物姓名" clearable />
                </el-form-item>
                <el-form-item label="宠物种类">
                    <el-select disabled v-model="form.typeId" placeholder="请选择宠物分类" style="width: 200px;">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-top: 20px;">
                <el-form-item label="宠物性别">
                    <el-select
                        disabled
                        v-model="form.sex"
                        placeholder="请选择宠物性别"
                        style="width: 200px;"
                        clearable>
                        <el-option label="公" value="公" />
                        <el-option label="母" value="母" />
                    </el-select>
                </el-form-item>
                <el-form-item label="宠物体温" label-suffix="℃">
                    <el-input-number disabled v-model="form.centigrade" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">℃</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="宠物体重">
            <el-input-number disabled v-model="form.weight" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">kg</span>
        </el-form-item>
        <el-form-item label="宠物身高">
            <el-input-number disabled v-model="form.height" :precision="2" :step="1" /><span style="margin-left: 10px; color: gray;">cm</span>
        </el-form-item>
        <el-form-item label="宠物心率">
            <el-input-number disabled v-model="form.heartRate" :step="1" /><span style="margin-left: 10px; color: gray;">次/分</span>
        </el-form-item>
        <!-- <div style="width: 100%; position: sticky;">
            <el-button type="primary" @click="onSubmit" style="position: absolute; right: 0;">提交</el-button>
        </div> -->

        <el-tabs v-model="activeName" class="demo-tabs" style="margin-top: 20px;">
            <el-tab-pane label="体检记录" name="checkUpLog">
                <el-table :data="form.petCheckUpInfoList" style="width: 100%">
                    <el-table-column prop="id" label="id" width="80" />
                    <el-table-column prop="name" label="体检名称" width="180" />
                    <el-table-column prop="date" label="体检日期" width="180" />
                    <el-table-column prop="result" label="体检结果" />
                    <el-table-column prop="report" label="报告单" width="180">
                        <template v-slot="scope">
                            <el-image style="width: 50px; height: 50px; border-radius: 5px" :src="scope.row.report" :preview-src-list="[scope.row.report]" preview-teleported></el-image>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="action" label="操作" width="100">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="delCheckUp(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <!-- <div class="card" v-if="checkUp.total">
                    <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="checkUp.params.pageSize" v-model:current-page="checkUp.params.pageNum" :total="checkUp.total" />
                </div> -->
            </el-tab-pane>
            <el-tab-pane label="疫苗记录" name="vaccineLog">
                <el-table :data="form.petVaccineList" style="width: 100%">
                    <el-table-column prop="id" label="id" width="80" />
                    <el-table-column prop="name" label="疫苗名称" width="180" />
                    <el-table-column prop="date" label="疫苗日期" width="180" />
                    <el-table-column prop="vaccineBrand" label="疫苗品牌" />
                    <el-table-column prop="dosage" label="剂量(ml)" width="180" />
                    <!-- <el-table-column prop="action" label="操作" width="100">
                        <template v-slot="scope">
                            <el-button type="primary" link @click="delVaccine(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <!-- <div class="card" v-if="vaccine.total">
                    <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="vaccine.params.pageSize" v-model:current-page="vaccine.params.pageNum" :total="vaccine.total" />
                </div> -->
            </el-tab-pane>
        </el-tabs>
        
    </el-form>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef } from "vue";
const baseUrl = import.meta.env.VITE_BASE_URL

const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
  formVisible: false,
  form: {},
  tableData: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  name: null,
  ids: [],
  shopList: [],
  typeList: [],
  rules: {
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    typeId: [{ required: true, message: "请选择分类", trigger: "change" }],
    price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  },
  viewVisible: false,
  content: null,
});

const load = () => {
  request
    .get("/petHealth/list", {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        name: data.name,
        typeId: data.typeId
      },
    })
    .then((res) => {
      if (res.code === "200") {
        data.tableData = res.data?.list || [];
        data.total = res.data?.total;
      } else {
        ElMessage.error(res.msg);
      }
    });
};
const form = ref({
    id: undefined,
    img: '',
    centigrade: 30.0,
    typeId: undefined,
    weight: 10.00,
    height: 60.00,
    heartRate: 80,
    petCheckUpInfoList: [],
    petVaccineList: [],
})
const handleEdit = (row) => {
  request.get('/petHealth/queryById/'+row.id).then(res=>{
    form.value = res.data
  })
  data.formVisible = true;
};

const reset = () => {
  data.name = null;
  data.typeId = null
  load();
};

load();
// 
const activeName = ref('checkUpLog')
const user = JSON.parse(localStorage.getItem('xm-user') || '{}')
const typeList = ref()
request.get('/petType/selectAll').then(res =>{
  typeList.value = res.data
})

</script>
  
<style scoped>
.avatar-uploader {
  height: 120px;
}
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>